<template>
  <div class="svg-root" :style="{ display: display, 'line-height': width + 'px', 'justify-content': 'center' }">
    <svg-icon :name="name" :color="color" :prefix="prefix" :style="{ width: width + 'px', height: width + 'px' }" />
    <div class="text" :style="textStyle">
      <slot />
    </div>
  </div>
</template>
<script lang="ts" setup>
import SvgIcon from './SvgIcon.vue'
defineProps({
  display: {
    type: String,
    default: 'flex'
  },
  prefix: {
    type: String,
    default: 'icon'
  },
  width: {
    type: Number,
    default: 30
  },
  textStyle: {
    type: Object,
    require: false
  },
  name: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: '#333'
  }
})


</script>
<style scoped lang="scss">
</style>